.front_body{
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background-color: #F0F4F5;
    .front_body_header{
        height: 48px;
        width: 100%;
        background-color: #F0F4F5;
        display: flex;
        position: fixed;
        top:0;
        justify-content: space-around;
        align-items: center;
        .header_title{
            padding: 0 20px;
            font-size: 25px;
            font-weight: 500;
            cursor: pointer;
        }
        .header_mo:hover{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            margin-right: 20px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            height: 30px;
            background-color: #1177DD;
        }
        .header_mo{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            margin-right: 20px;
            text-align: center;
            border-radius: 10px;
            height: 30px;
        }
        .header_click{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            margin-right: 20px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            height: 30px;
            background-color: #1177DD;
        }
        .header_click:hover{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            margin-right: 20px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            height: 30px;
            background-color: #1177DD;
            opacity: 0.8;
        }
        .header_control{
            padding: 0 20px;
            cursor: pointer;
        }
    }
    .front_body_content_f{
        background-color: #F0F4F5;
        width: 100%;
        height: calc(100vh - 68px);
        background:url("../../assets/img/index.png") no-repeat;
        background-position: center;
        background-size: 100%;
        animation: img_ani ease-in 0.5s;
    }
    .front_body_content_s{
        background-color: #F0F4F5;
        width: 100%;
        height: 800px;
        background:url("../../assets/img/index_1.png") no-repeat;
        background-position: center;
        background-size: 100%;
        animation: img_ani linear 1.5s ;
    }
    .front_body_content_t{
        background-color: #F0F4F5;
        width: 100%;
        height: 700px;
        background:url("../../assets/img/index_2.png") no-repeat;
        background-position: center;
        background-size: 100%;
        animation: img_ani linear 3.5s ;
    }
    .front_body_content_fo{
        height: 600px;
        background:url("../../assets/img/index_3.png") no-repeat;
        background-position: center;
        background-size: 100%;
        animation: img_ani linear 4.5s ;
    }
    @keyframes img_ani {
        from{
            visibility: hidden;
            transform: translateY(2000px);
        }
        to{
            visibility: visible;
            transform: translateY(0px);
        }
    }
}

.about{
    position: relative;
    padding: 10px;
    .about_footer{
        position: absolute;    
        right: 10px;
        color: #2E9784;
    }
}

.front_body::-webkit-scrollbar{
    width: 5px;
}

.front_body::-webkit-scrollbar-thumb{
    border-radius:5px;
    background-color: silver;
}